<template>
    <div>
        <Table ref="table" :tableData="table_data" @current-change="change" @add="add" @edit="edit" @rowDelete="rowDelete" @search="search">
            <!-- 自定义按钮插槽 -->
            <template v-slot:button="slotProps">
                <el-button @click="editButton(slotProps)" type='primary' size='mini' icon='el-icon-edit'></el-button>
            </template>
            <!-- 自定义文本插槽 -->
            <template v-slot:text="slotProps">
                <p style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{slotProps.item.text}}</p>
            </template>
            <!-- 自定义文本编辑插槽 -->
            <template v-slot:text_edit="slotProps">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="$refs.table.form[slotProps.item]">
                </el-input>
            </template>
        </Table>
    </div>
</template>

<script>
import Table from '../components/Table.vue'
import axios from 'axios'
    export default {
        name: "ManagerTable",
          components: {
            Table
        },
        data() {
            return {
                table_data: {}
            };
        },
        mounted(){
            this.getTablesData(1)
        },
        computed:{
            
        },
        methods:{

            /**
             * 模拟获取mock数据方法
             * @property {String} 页码
             */
            getTablesData(num){
                axios.get('/mock/manager-'+num+'.json').then(res=>{
                    console.log(res)
                    //赋值您的自定义变量，该变量绑定表格渲染组件
                    this.table_data=res.data.table_data
                })
            },

            /**
             * 页码切换回调
             * @property {Number} 当前切换的页码
            */
            change(i){
                console.log(i)
                //传入页码，更新数据
                this.getTablesData(i)
            },

            /**
             * 搜索按钮回调
             * @property {Number} 当前切换的页码
            */
            search(prop,content){
                console.log(prop,content)
                this.$alert(`要搜索的内容是${prop}=${content}`)
            },

            /**
             * @typedef {Object} cb
             * @property {Boolean} 是否修改成功
             * @property {String} 提示消息
             */
            /**
             * 添加一行回调
             * @param {Object} 新行数据
             * @param {cb} callback 第一个是否修改成功，第二个为消息提示
            */
            add(data,callback){
                console.log(data)
                callback(true,"新增成功了！")
                //callback(false,"添加失败！")
            },
            
            /**
             * 编辑一行回调
             * @param {Object} 当前行旧数据
             * @param {Object} 当前行新数据
             * @property {Number} 行下标
             * @param {cb} callback 第一个是否修改成功，第二个为消息提示
            */
            edit(old_data,data,i,callback){
                console.log(old_data,data,i)
                callback(true,"修改成功了！")
            },
            
            /**
             * 删除一行回调
             * @param {Object} 删除行数据
             * @property {Number} 行下标
             * @param {cb} callback 第一个是否修改成功，第二个为消息提示
             */
            rowDelete(data,i,callback){
                console.log(data,i)
                callback(true,"删除成功！")
            },

            /**
             * @typedef {Object} slotProps
             * @property {Object} 行数据
             * @property {Number} 行下标
             */

            /**
             * 插槽使用例子-按钮案例
             * @param {slotProps} slotProps
            */
           
            editButton(slotProps){
                 this.$alert(JSON.stringify(slotProps), '自定义按钮点击事件', {
                    confirmButtonText: '确定'
                });
            }
        }
    };
</script>

<style scoped>

</style>